// 漏洞风险态势
function chartLdfx(trafficWay, el) {
  // console.log(trafficWay)
  let serviceData = [];
  let bgColor = "rgba(5,39,58,.1)";
  let color = [
    "#0090FF",
    "#36CE9E",
    "#FFC005",
    "#FF515A",
    "#8B5CFF",
    "#00CA69",
  ];
  const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
        "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
  };
  for (let i = 0; i < trafficWay.value.length; i++) {
    serviceData.push({
      name: trafficWay.value[i].year,
      type: "line",
      smooth: true,
      // showSymbol: false,/
      symbolSize: 8,
      zlevel: 3,
      lineStyle: {
        normal: {
          color: color[i],
          shadowBlur: 3,
          shadowColor: hexToRgba(color[i], 0.5),
          shadowOffsetY: 8,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: hexToRgba(color[0], 0.3),
              },
              {
                offset: 1,
                color: hexToRgba(color[0], 0.1),
              },
            ],
            false
          ),
          shadowColor: hexToRgba(color[0], 0.1),
          shadowBlur: 10,
        },
      },
      data: trafficWay.value[i].value,
    });
  }
  let xAxisData = trafficWay.month;
  var option = {
    backgroundColor: bgColor,
    color: color,
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        let html = "";
        params.forEach((v) => {
          // console.log(v)
          html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                              <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                                color[v.componentIndex]
                              };">
                              </span>${v.seriesName}.${v.name}
                              <span style="margin-left:3px;color:${
                                color[v.componentIndex]
                              };font-weight:700;font-size: 12px">${v.value}
                              </span>个`;
        });
        // console.log(params)
        return html;
      },
      extraCssText:
        "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
    },
    grid: {
      // echats 内边距
      x: 10,
      y: 100,
      x2: 20,
      y2: 0,
      top: 30,
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          formatter: "{value}月",
          textStyle: {
            color: "rgba(215,215,217,.5)",
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(215,215,217,.5)",
          },
        },
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位：个",
        axisLabel: {
          textStyle: {
            color: "rgba(215,215,217,.5)",
          },
        },
        nameTextStyle: {
          color: "rgba(215,215,217,.5)",
          fontSize: 12,
          lineHeight: 10,
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "rgba(215,215,217,.1)",
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: serviceData,
  };
  $(el).echartSet(option);
}
// 弱密码
function chartRmm(trafficWay, el) {
  var img =
    "";
  var data = [];
  var color = [
    "#00ffff",
    "#00cfff",
    "#006ced",
    "#ffe000",
    "#ffa800",
    "#ff5b00",
    "#ff3000",
  ];
  for (var i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          normal: {
            borderWidth: 0,
            shadowBlur: 20,
            borderColor: color[i],
            shadowColor: color[i],
          },
        },
      },
      {
        value: 2,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
  }
  var seriesOption = [
    {
      name: "",
      type: "pie",
      clockWise: false,
      radius: [45, 49],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: "outside",
            color: "#ddd",
            fontSize: 8,
            formatter: function (params) {
              var percent = 0;
              var total = 0;
              for (var i = 0; i < trafficWay.length; i++) {
                total += trafficWay[i].value;
              }
              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== "") {
                return params.name + "\n" + "\n" + "占百分比：" + percent + "%";
              } else {
                return "";
              }
            },
          },
          labelLine: {
            length: 10,
            length2: 10,
            show: true,
            color: "#00ffff",
          },
        },
      },
      data: data,
    },
  ];
  var option = {
    backgroundColor: "rgba(5,39,58,.1)",
    color: color,
    title: {
      text: "弱密码类型",
      top: "44%",
      textAlign: "center",
      left: "49%",
      textStyle: {
        color: "#fff",
        fontSize: 10,
        fontWeight: "400",
      },
    },
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 80,
            height: 80,
          },
          left: "center",
          top: "center",
          position: [100, 100],
        },
      ],
    },
    tooltip: {
      show: false,
    },
    toolbox: {
      show: false,
    },
    grid: {
      width: "100px",
      height: "100px",
      containLabel: true,
    },
    series: seriesOption,
  };
  $(el).echartSet(option);
}

// 明文传输
function chartMwcs(trafficWay, el) {
  // web明文传输
  var xdata = trafficWay.map((v) => v.name);
  var data = trafficWay.map((v) => v.value);
  // var maxArr = [100, 100];
  var option = {
    backgroundColor: "rgba(5,39,58,.1)", //背景色
    tooltip: {
      trigger: "axis",
      borderRadius: 5,
      borderColor: "#6baab2",
      borderWidth: 1,
      formatter: function () {
        // return (
        //   params[0].data.nameCode +
        //   "<br>" +
        //   "杆塔数量(基数) :" +
        //   params[0].value
        // );
      },
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "2%",
      top: "15%",
      containLabel: true,
    },
    xAxis: {
      data: xdata,
      triggerEvent: true,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        rotate: 0,
        interval: 0,
        textStyle: {
          color: "rgb(95,109,119)",
          fontSize: 10,
        },
      },
    },
    yAxis: {
      triggerEvent: true,
      splitNumber: 3,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgb(148,159,167)",
          fontSize: 10,
        },
      },
    },
    // color: ["#e54035"],
    series: [
      {
        name: "hill",
        barMinHeight: 10,
        type: "pictorialBar",
        barCategoryGap: "40%",
        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
        itemStyle: {
          normal: {
            //barBorderRadius: 5,
            //渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#01EAED",
              },
              {
                offset: 0.5,
                color: "#02C4DD",
              },
              {
                offset: 1,
                color: "#029ED9",
              },
            ]),
          },
        },
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: "#0FFCFF",
              fontSize: 12,
            },
          },
        },
        data: data,
        z: 10,
      },
    ],
  };
  $(el).echartSet(option);
}
// 页面挂载后执行
jQuery(document).ready(function ($) {
  var date = new Date();

  // 获取项目数字
  GetJSON(configURL.baseURL + configURL.numURL, {}, function (data) {
    // 资产总数
    $("#J_number_zc").html(data.zihcan_sum);
    // 系统服务时间
    $("#J_number_system_time").html(data.system_num);
    // 统计天数
    $("#J_number_tjts").html(data.tongji_time);
    // 漏洞风险
    $("#J_number_ldfx").html(data.loudongfengxian_num);
    // 弱密码
    $("#J_number_rmm").html(data.ruomima_num);
    // 弱密码
    $("#J_number_rmm").html(data.ruomima_num);
    // web明文传输
    $("#J_number_mwmm").html(data.web_mingwen_num);
    // 高危安全事件
    $("#J_number_gwaq").html(data.gaowei_safe_num);
    // 脆弱性风险
    $("#J_number_crxfx").html(data.cuiruo_num);
  });

  // 脆弱资产TOP10
  GetJSON(configURL.baseURL + configURL.assetsURL, {}, function (data) {
    data = changeDataLen(data, 10);
    var html = template("J_cryc_list_temp", { data: data });
    $("#J_cryc_list").html(html);
  });

  // 漏洞风险态势
  GetJSON(configURL.baseURL + configURL.loopholeURL, {}, function (data) {
    chartLdfx(data, "#J_chart_ldfx");
  });

  // 弱密码
  GetJSON(configURL.baseURL + configURL.weakPasswordURL, {}, function (data) {
    chartRmm(data, "#J_chart_rmm");
  });

  // 实时性脆弱性检测
  GetJSON(configURL.baseURL + configURL.realTimeURL, {}, function (data) {
    console.log(data);
    data = changeDataLen(data, 5);
    var html = template("J_crxjc_list_temp", { data: data });
    $("#J_crxjc_list").html(html);
  });

  // 高危安全事件 TOP5
  GetJSON(configURL.baseURL + configURL.highRiskUrl, {}, function (data) {
    console.log(data);
    data = changeDataLen(data, 5);
    var html = template("J_gwaq_list_temp", { data: data });
    $("#J_gwaq_list").html(html);
  });

  // WEB明文传输
  GetJSON(configURL.baseURL + configURL.webPlaintextURL, {}, function (data) {
    chartMwcs(data, "#J_chart_mwcs");
  });

  // 设置当前时间
  setInterval(() => {
    $("#J_date_time").html(
      date.toLocaleString("zh-CN", {
        hour12: false,
      })
    );
  }, 1000);
  // 设置当前星期数
  $("#J_date_week").html(getWeek(date.getDay()));
});
